<template>
	<view class="notice" :style="'background:' + noticeBcakground + ';'">
		<view class="notice-left">
			<image :src="noticeIcon" mode="widthFix"></image>
		</view>
		<view class="notice-right">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular vertical>
				<swiper-item v-for="(item,index) in noticeList" :key="index">
					<view class="swiper-item">
						<text :style="'font-size:' + noticeSize +'rpx;' + 'color:' + noticeColor + ';'">{{item}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-notice",
		props:{
			/* 通知内容 */
			noticeList:{
				type:Array,
				default:()=>{}
			},
			/* 通知图标 */
			noticeIcon:{
				type:String,
				default:'/static/svg/notice.svg'
			},
			/* 通知背景色 */
			noticeBcakground:{
				type:String,
				default:'#00f5e5'
			},
			/* 通知字体大小 */
			noticeSize:{
				type:Number,
				default:24
			},
			/* 通知字体颜色 */
			noticeColor:{
				type:String,
				default:'#666'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	$img:'/static/svg/notice.svg';
.notice{
	width: 690rpx;
	height: 88rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 30rpx;
	box-sizing: border-box;
	// background-color: #007AFF;
	border-radius: 10rpx;
	.notice-left{
		width: 50rpx;
		height: 50rpx;
		
		image{
			width: inherit;
			height: inherit;
		}
	}
	.notice-right{
		width: 550rpx;
		height: 88rpx;
		swiper{
			width: inherit;
			height: inherit;
			swiper-item{
				width: inherit;
				height: inherit;
				.swiper-item{
					width: inherit;
					height: inherit;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					text{
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
</style>
